<template>
  <view class="wrap">
    <view class="backImage">
      <image src="../../../static/interImage.png" mode="widthFix" class="img"></image>
    </view>
    <view class="hd">
      <uv-navbar fixed title="参会清单" autoBack safeAreaInsetTop placeholder :border='false' bg-color="rgba(0,0,0,0)" titleStyle='color: #FFFFFF' leftIconColor='#FFFFFF'></uv-navbar>
      <view class="title">{{ detail.enroll_count }} <text class="unit">人</text></view>
      <view class="font">当前报名</view>
      <view class="tab">
        <view class="item" @click="openPopup">导出报名</view>
        <view class="item" @click="chooseFile">导入参会人</view>
        <view class="item" @click="goAddPeople">添加参会人</view>
      </view>
    </view>
    <view class="box" v-if="pageShow">
      <view class="pox">
        <scroll-view scroll-y="true" class="scroll" :style="`height: ${height}px`">
          <view class="list">
            <view class="item" v-for="(item,index) in detail.enroll_list" :key="index">
              <view class="left">
                <view class="ha">
                  <view class="data">姓名：{{ item.name }}</view>
                  <view class="data">{{ item.mobile }}</view>
                </view>
                <view class="ha">
                  <view class="data">公司：{{ item.company_name }}</view>
                </view>
                <view class="ha">
                  <view class="data">职位：{{ item.job }}</view>
                  <view class="data">是否外呼：需要</view>
                </view>
              </view>
              <view class="right" v-if="item.status == 0">
                <button class="btn" hover-class="none" @click="tabClick(item, 1)">通过</button>
                <button class="btn" hover-class="none" @click="tabClick(item, 2)">不通过</button>
              </view>
              <view class="right" v-else>
                {{ statusList[item.status] }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <uv-popup ref="popup" bgColor='#FFF' round='24rpx'>
      <view class="bomb" v-if="status">
        <view class="close" @click="close">
          <uv-icon size="40rpx" name="close" color='#999999'></uv-icon>
        </view>
        <view class="desc">拒绝理由</view>
        <view class="textarea">
          <uv-textarea v-model="reason" placeholder="请输入" maxlength='255' border='none' placeholderStyle='font-size: 28rpx' :textStyle="{fontSize: '28rpx'}" :customStyle="{backgroundColor: '#F5F5F5',borderRadius: '16rpx'}"></uv-textarea>
        </view>
        <view class="foot">
          <button class="btn cancel" @click="close">取消</button>
          <button class="btn confirm" @click="operate">确认</button>
        </view>
      </view>
      <view class="copes" v-else>
        <view class="bigTitle">复制链接</view>
        <view class="content">
          <view class='desc'>导出成功，请复制链接到浏览器下载文件</view>
          <view class='desc'>链接：{{ url }}</view>
        </view>
        <button class="btn" hover-class="none" @click="copeUrl">复制链接</button>
      </view>
    </uv-popup>
    <uv-modal ref="modal" title="需要文件访问权限" showCancelButton confirmColor='#E43222' confirmText='去授权' @confirm="confirm">
      <view>
        您还未授权本应用读取文件。为保证您可以正常上传文件，请在权限设置页面打开文件访问权限（不同手机厂商表述可能略有差异）请根据自己手机品牌设置
      </view>
    </uv-modal>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { get, post, upload } from '@/api';
import { toast, choose } from '@/common';
// #ifdef APP-PLUS
const lemonjkFileSelect = uni.requireNativePlugin('lemonjk-FileSelect');
// #endif

const { ctx } = getCurrentInstance();
const popup = ref(null);
const modal = ref(null);
const typeList = ref({
  0: '不需要',
  1: '需要'
})
const statusList = ref({
  1: '已通过',
  2: '已拒绝'
})
let id = '';
let height = ref(0);
let detail = ref({});
let pageShow = ref(false);
let storage = ref({});
let reason = ref('');
let status = ref(1);
let url = ref('');
let isPage = false;
let liveStatus = 0;

onLoad((option) => {
  id = option.id;
  liveStatus = option.status;
  getData();
})
onShow(() => {
  if(isPage){
    isPage = false;
    getData();
  }
})
onHide(() => {
  isPage = true;
})

function getData(){
  get('/api/Live/getEnrollInfo', { lessonLiveId: id }).then(res => {
    if(res.code == 1){
      detail.value = res.data;
      getUrlDown();
      setTimeout(() => {
        getImageInfo();
      }, 200)
    }
  })
}
function getUrlDown(){
  const params = {
    lessonLiveId: id
  }
  get('/api/Live/exportEnrollList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      url.value = data;
    }
  })
}
function toExamineEnroll(idx){
  const params = {
    enrollId: storage.value.id,
    status: idx,
    remarks: reason.value
  }
  post('/api/Live/toExamineEnroll', params).then(res => {
    if(res.code == 1){
      getData();
    }
  })
}
function confirm(){
  // 跳转到应用设置页
  lemonjkFileSelect.gotoSetting();  
}
// 选择文件并上传
function chooseFile(){
  // #ifndef APP-PLUS
  return toast('请打开APP上传');
  // #endif
  
  // #ifdef APP-PLUS
  if(liveStatus == 1) return toast('直播已下线,不能导入');
  lemonjkFileSelect.showPicker({
    mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    utisType: 'org.openxmlformats.spreadsheetml.sheet'
  }, res => {
    let os = uni.$uv.os();
    if(os == 'android'){
      if(res.code == 1001){
        modal.value.open();
      }else if(res.code == 0){
        upload('/api/Live/importEnrollList', {
          name: 'file',
          file: res.files[0].filePath,
          filePath: res.files[0].filePath,
          formData: {
            lessonLiveId: id
          }
        }).then(res => {
          console.log(res);
          if(res.code == 1){
            toast('导入成功');
            setTimeout(() => {
              getData();
            }, 1000)
          }
        })
      }else{
        toast(res.detail)
      }
    }else{
      if(res.code == 0){
        upload('/api/Live/importEnrollList', {
          name: 'file',
          file: res.files[0].filePath,
          filePath: res.files[0].filePath,
          formData: {
            lessonLiveId: id
          }
        }).then(res => {
          if(res.code == 1){
            getData();
          }
        })
      }else{
        toast(res.detail)
      }
    }
  })
  // #endif
}
function tabClick(row, idx){
  status.value = 1;
  storage.value = row;
  if(idx == 1){
    toExamineEnroll(idx);
  }else{
    popup.value.open();
  }
}
function operate(){
  toExamineEnroll(2);
  close();
}
function openPopup(){
  if(!url.value) return toast('暂无报名用户');
  status.value = 0;
  popup.value.open();
}
function close(){
  popup.value.close();
  reason.value = '';
}
function copeUrl(){
  uni.setClipboardData({
  	data: url.value,
  	success: function () {
  		toast('复制成功');
      popup.value.close();
  	}
  });
}
function getImageInfo(){
  ctx.$uv.getRect('.hd').then(res => {
    const h = res.height;
    const sys = uni.$uv.sys();
    const win = sys.windowHeight;
    height.value = win - h - 30;
    pageShow.value = true;
  })
}
function goAddPeople(){
  if(liveStatus == 1) return toast('直播已下线,不能添加');
  uni.navigateTo({
    url: `/pages/mine/myLive/addPeople?id=${id}`
  });
}
</script>

<style lang="scss" scoped>
  .copes{
    width: 80vw;
    padding-bottom: 40rpx;
    .btn{
      width: 226rpx;
      margin: 0 auto;
      margin-top: 70rpx;
    }
    .content{
      padding: 0 30rpx;
      .desc{
        font-weight: 400;
        font-size: 30rpx;
        color: #2B2B2B;
        word-wrap:break-word; 
        word-break:break-all;
      }
    }
    .bigTitle{
      font-weight: 500;
      font-size: 36rpx;
      color: #2B2B2B;
      padding: 40rpx 0;
      text-align: center;
    }
  }
  .bomb{
    position: relative;
    width: 80vw;
    .foot{
      width: 100%;
      padding: 0 34rpx;
      padding-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btn{
        width: 48%;
        text-align: center;
        &.confirm{
          
        }
        &.cancel{
          background-image: none;
          background-color: #FFFFFF;
          color: #737373;
          border: 1px solid #737373;
        }
      }
    }
    .close{
      position: absolute;
      right: 35rpx;
      top: 35rpx;
      z-index: 2;
    }
    .desc{
      font-weight: 500;
      font-size: 36rpx;
      color: #2B2B2B;
      text-align: center;
      padding-top: 40rpx;
    }
    .textarea{
      padding: 40rpx;
    }
  }
  .box{
    padding: 0 30rpx;
    position: relative;
    z-index: 2;
    .pox{
      background: #FFFFFF;
      box-shadow: 0 5rpx 11rpx 0 #ff706d8c;
      border-radius: 15rpx;
      padding: 15rpx 0;
      height: 100%;
      .scroll{
        height: 100%;
        .list{
          padding: 0 30rpx;
          .item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 30rpx 0;
            border-bottom: 1px solid #F0F0F0;
            &:last-child{
              border-bottom: 0;
            }
            .left{
              flex: 1;
              width: 0;
              padding-right: 20rpx;
              .ha{
                padding-bottom: 10rpx;
                display: flex;
                align-items: center;
                &:last-child{
                  padding-bottom: 0;
                }
                .data{
                  font-size: 26rpx;
                  color: #000;
                  padding-right: 30rpx;
                  &:last-child{
                    padding-right: 0;
                  }
                }
              }
            }
            .right{
              font-size: 0;
              color: #FF4D45;
              font-size: 28rpx;
              .btn{
                width: 120rpx;
                height: 48rpx;
                line-height: 48rpx;
                margin-bottom: 10rpx;
                &:last-child{
                  margin-bottom: 0;
                }
              }
            }
          }
        }
      }
    }
  }
  .hd{
    text-align: center;
    padding-top: 60rpx;
    position: relative;
    z-index: 2;
    .tab{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 30rpx;
      .item{
        width: 32%;
        background-color: #fff;
        border-radius: 15rpx;
        height: 92rpx;
        line-height: 92rpx;
        text-align: center;
        color: #FF4D45;
      }
    }
    .font{
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFFFF;
    }
    .title{
      font-weight: 700;
      font-size: 62rpx;
      color: #FFFFFF;
      .unit{
        font-weight: 600;
        font-size: 28rpx;
        color: #FFFFFF;
      }
    }
  }
  .backImage{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F0F0F0;
  }
</style>